<template>
<div>

  <div class="a">
    <div style="text-align: center">
      <img alt="知乎 LOGO"  width="158px" class="SignFlowHomepage-logo" src="https://pic2.zhimg.com/80/v2-f6b1f64a098b891b4ea1e3104b5b71f6_720w.png"></div>
    <div class="b">
      <form action="" class="login-content">
        <div class="SignFlow-tabs">
          <div @click="b()" :class="{active:a==1}"  class="SignFlow-tab SignFlow-tab--active" role="button"     tabindex="0">免密码登录</div>
          <div @click="c()" :class="{active:a==2}" style="margin-left: 80px" class="SignFlow-tab" role="button" tabindex="0">密码登录</div>
       <div v-if="a==1">   <login></login></div>
        <div v-if="a==2">
          <passwordLogin></passwordLogin>
        </div>
          <div @click="erweima" role="button" tabindex="0" aria-label="二维码图片" class="SignFlow-qrcodeTab">
            <svg width="52" height="52" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"><mask id="id-3757926926-a" width="52" height="52" x="0" y="0" maskUnits="userSpaceOnUse">
            <path fill="#fff" d="M0 0l52 52V0H0z"></path></mask><g mask="url(#id-3757926926-a)">
            <path fill="#06F" d="M0 0h48a4 4 0 014 4v48L0 0z"></path><path fill="url(#pattern0)" d="M0 0h52v52H0z">
          </path></g><defs><pattern id="pattern0" width="1" height="1" patternContentUnits="objectBoundingBox">
            <use transform="scale(.00216)" xlink:href="#image0"></use></pattern><image id="image0" width="463" height="463" xlink:href=""></image></defs></svg></div>
        </div>
      </form>
    </div>
  </div>

</div>


</template>

<script>
import passwordLogin from "./passwordLogin";
import login from "./login";
export default {
  name: 'HelloWorld',
  components:{
    login,
    passwordLogin
  },
  data () {
    return {
      a:1

    }
  },
  methods:{
    b(){
      this.a=1
      console.log(this.a);
    },
    c(){
      this.a=2
      console.log(this.a);
    },
    erweima(){

      this.$router.push({path:'/erweima'})
    }
  }
}
</script>

<style scoped>
.active{
  font-weight: 600;
  position: relative;
  color: #121212;
  border-bottom: 5px solid cornflowerblue ;
}
.a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-image: url('../assets/img/sign_bg.db29b0fb.png');
  background-repeat: no-repeat;
  background-color: #b8e5f8;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.b{
  position: relative;
  overflow: hidden;
  width: 375px;
  height: 465px;
  margin: 0 auto;

}

.SignFlow-qrcodeTab svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  top:  -467px;;
  left: 92%;
}
.login-content{
  padding: 0 24px 84px;
  text-align: center;
  background-color: #fff;
}
.SignFlow-tab {
  display: inline-block;
  text-align: left;
  padding: 16px 0px


}


</style>
